iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0
Mobile Development

Swift iOS UIKit 初學者系列:從零開始開發互動式應用系列 第 9

【Day 09】深入探索 UILabel:靈活的文字顯示與互動效果

  • 分享至 

  • xImage
  •  

導言

在第一周,我們學會了如何使用 Storyboard 設計多重結局的互動應用,並透過 Auto Layout 讓 UI 在不同的裝置上能夠正確顯示。本週的焦點將放在深入探討常見 UI 元件的進階應用上,特別是在開發互動故事書或文字密集型的應用中,UILabel 扮演了至關重要的角色。透過掌握 UILabel 的進階功能,開發者可以靈活控制文字排版,提升 UI 的動態適應性,並與第七天所學的 Auto Layout 技巧協同運作,優化應用的使用體驗。

UILabel 不僅僅是一個用來顯示文字的元件,透過進階屬性設定,我們可以靈活地控制文字的排版、顯示效果,甚至是互動反應。今天,我們將探索 UILabel 的進階功能,如文字換行(Line Breaks)、自動縮小字體(Autoshrink)、文字陰影效果(Shadow)以及點擊強調(Highlighted)等,這些技巧能讓文字顯示更具視覺吸引力,也能提升應用的可用性與互動性。

學習目標

  • 探索 UILabel 進階屬性,靈活掌控文字顯示效果。
  • 學會使用多種文字效果來優化應用介面。
  • 深入理解 UILabel 在互動應用中的作用,提升用戶體驗。

UILabel 設置與應用步驟

1. Line Breaks - 換行方式

UILabel 的 lineBreakMode 屬性決定了當文字過長無法顯示在同一行時,應如何處理換行或截斷。這裡我們將深入探討 lineBreakMode 的多種模式,並透過範例說明其效果。

換行模式

Character Wrap:以字母為單位進行換行。如果一行顯示不下整個單字,文字會在字母間進行換行。例如,當顯示 "iPhone" 時,若 "e" 無法容納於當前行,"e" 會自動被移至下一行,保持單字完整顯示。

Word Wrap:以單詞為單位進行換行。當一整個單詞無法顯示在當前行的剩餘空間中,該單詞會被移動到下一行。這種模式適合文字密集型的應用,保持語意的連續性,確保不會在字母中斷造成閱讀障礙。

換行裁切模式

Clipping:這種模式會直接裁切掉放不下的文字,無論是在單詞或單字的中間。例如,若顯示的文字中有"業"這個字,當其一部分無法容納於行內,部分字形將被裁切。這種模式下,只有最末行會發生內容裁切。

省略模式

Truncate Head:這種模式下,當文字過長時,省略號會顯示在開頭,保留最後部分的內容。這在需要重點突出末尾資訊的場合特別有用。

Truncate Middle:當文字超出可顯示範圍時,省略號會顯示在中間,保留文字的開頭與尾端部分。這種模式適合需要同時顯示開頭和結尾資訊,而可以忽略中間部分的情境。

Truncate Tail:當文字過長時,在最後一行末尾處顯示省略號(…),保留前面的內容。這是 UILabel 的預設行為,適合需要完整顯示開頭部分但可以略過尾端的情況。

相關 API:NSLineBreakMode

lineBreakMode 屬性背後使用的是 NSLineBreakMode,其中包含了上述所有換行和裁切選項。這些設定可以根據不同的 UI 需求靈活應用,確保文字排版在各種裝置和情境下都能保持最佳效果。

2. Autoshrink - 自動縮小字體

當我們遇到長文字無法完全顯示在 UILabel 中時,Autoshrink 提供了一個方便的解決方案:自動縮小字體大小以適應標籤的寬度,確保文字不會被截斷而無法完整顯示。

Interface Builder 使用:

在 Interface Builder 中啟用 adjustsFontSizeToFitWidth 很簡單,你只需在屬性檢視器中找到「自動縮小」選項,然後選擇「Minimum Font Scale」來設定最小字體比例。

在設計國際化應用或動態內容更新的場景下,Line Breaks 和 Autoshrink 屬性能幫助開發者靈活調整文字顯示。比如,當標題長度不定或需要適應不同語言時,Autoshrink 可以確保文字不會超出範圍,同時保持良好的可讀性。

關鍵屬性:

  • adjustsFontSizeToFitWidth:開啟此屬性即可啟用自動縮小功能。當文字超出標籤的顯示範圍時,UILabel 會自動調整字體大小,直到文字完全適合標籤的邊界範圍。adjustsFontSizeToFitWidth 僅在 numberOfLines 屬性設為 1 時生效,也就是當 UILabel 僅限顯示單行文字時,該功能才會自動運作。
  • minimumScaleFactor:此屬性允許我們設定字體縮小的最小比例。這確保文字在縮小時不會過小而影響可讀性。例如,將 minimumScaleFactor 設定為 0.5,表示字體可縮小到原始大小的一半。與過去的 minimumFontSize 屬性相比,蘋果建議開發者使用更新的 minimumScaleFactor 來設定最小字體比例,這樣可以更靈活地控制字體縮小的行為。

應用情境:

這項功能特別適用於單行文字標籤,尤其是在動態內容如標題或數據顯示時,它能避免文字超出邊界或被截斷。例如,在設計用戶界面時,你可能會遇到不同語言或字數不同的動態內容,這時 Autoshrink 能自動調整字體大小以適應標籤。

3. Shadow - 陰影效果

為文字加上陰影,增強文字的層次感和可讀性。在背景較為單調或文字需要突出的情境下,陰影可以讓文字更具視覺吸引力,特別適合於標題或重點內容。

屬性:

  • shadowColor:設定陰影的顏色。
  • shadowOffset:設定陰影的偏移量,通常會設定微小的偏移來讓文字有立體感。

4. Highlighted - 點擊強調效果

功能:當 UILabel 被嵌入 UITableView 或 UICollectionView 的 cell 中時,可以使用點擊強調效果來增強互動性。在列表或互動場景中,這個屬性可以強化用戶與介面的互動,讓點擊事件更直觀。

屬性:

  • isHighlighted:設定是否啟用高亮效果。
  • highlightedTextColor:設定選中狀態下的文字顏色。

回顧重點

  • 熟悉 UILabel 的進階屬性,靈活運用換行、自動縮小字體、陰影及強調效果。
  • 根據不同需求,透過這些屬性提升介面美觀與用戶體驗。
  • 特別在文字密集或需要互動的應用中,這些技巧能讓文字顯示更靈活且更具吸引力。

總結

UILabel 的進階功能不僅能讓文字顯示更加精緻,也能提升應用的可讀性與互動性。透過這些技巧,你可以更靈活地應用 UILabel,尤其在開發互動故事書或文字密集型的應用時,這些設定能極大地提高用戶體驗。

此外,Line Breaks(換行方式) 和 Autoshrink(自動縮小字體) 與第7天教學中提到的 Auto Layout 屬性,如 Content Hugging Priority 和 Content Compression Resistance Priority,有密切的關聯。在第7天的文章中,我們深入探討了這些 Auto Layout 屬性如何控制 UI 元件在壓縮與擴展時的表現。現在,在 UILabel 中,這些屬性可以協同運作,確保文字在動態佈局中不會出現過度壓縮或溢出,並能根據需要自動縮放以適應不同的螢幕大小。

透過結合這些屬性,開發者能更靈活地控制 UILabel 的排版與大小,從而提升 UI 的整體表現,確保在不同裝置上都能獲得一致且精緻的用戶體驗。

參考

附錄:已接觸的 UIKit 元件

第2周
UILabel (Day 09)– 顯示文字,設定換行(Line Breaks)、自動縮小字體(Autoshrink)、陰影(Shadow)、強調效果(Highlighted)。


上一篇
【Day 08】Auto Layout 修練 - 3 - 適應各裝置的 Size Classes:直向橫向佈局的最佳實踐
下一篇
【Day 10】用 addSubview 打造視覺豐富的故事卡片:圖片、文字與動態效果的完美結合
系列文
Swift iOS UIKit 初學者系列:從零開始開發互動式應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言